<template>
    <div class="login">
        <el-card class="box-card">
            <h2>用户登陆</h2>
            <div class="form_div">
                <el-form label-width="80px" :model="form" ref="form">
                    <el-form-item label="用户名" prop="name" :rules="rules.name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password" :rules="rules.password">
                        <el-input type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="login('form')">登陆</el-button>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import { systemApi } from "../api/api"

export default {
    data() {
        return {
            form: {
                name: 'admin',
                password: '123'
            },
            rules: {
                name: { required: true, trigger: 'blur' },
                password: { required: true, trigger: 'blur' }
            }
        }
    },
    created() {
        // 监听回车事件
        document.onkeydown = () => {
            let _key = window.event.keyCode;
            if (_key === 13) {
                this.login('form');
            }
        }
    },
    methods: {
        login(form) {
            this.$refs[form].validate((valid) => {
                //表单校验通过
                if (valid) {
                    systemApi.login(this.form)
                }
            })
        }
    }
}
</script>

<style lang="scss">
.login {
    .box-card {
        width: 400px;
        margin: 200px auto;

        h2 {
            font-weight: bold;
            margin-bottom: 10px;
        }

        .el-button--primary {
            width: 360px;
        }

    }
}
</style>